import {
  AfterContentInit,
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges,
  ViewChild,
  ChangeDetectorRef
} from '@angular/core';
import {JspanelxComponent} from "../jspanelx.component";

@Component({
  selector: 'app-confirm-modal',
  template: `
    <app-jspanelx
      #panel>
      <app-simple-table
        #tb
        [dataSource]="[
            {name: 'michael', age: '15'},
            {name: 'zorro', age: '45'},
            {name: 'jack', age: '15'},
            {name: 'hank', age: '22'},
            {name: 'messi', age: '55'},
        ]"
      >
        <thead>
        <tr>
          <th>name</th>
          <th>age</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let row of tb.data">
          <td>{{row.name}}</td>
          <td>{{row.age}}</td>
        </tr>
        </tbody>
      </app-simple-table>
      <button nz-button nzType="primary" (click)="panel.close()">close modal</button>
    </app-jspanelx>
  `,
  styles: [
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ConfirmModalComponent
  implements OnInit, AfterContentInit, AfterViewInit,
    OnChanges
{

  constructor(private cdr: ChangeDetectorRef) { }
  @ViewChild('panel', {static: false}) panel: JspanelxComponent
  @Input() visible = false

  ngOnInit(): void {
  }


  ngOnChanges(changes: SimpleChanges) {
    const { visible } = changes
    if (visible && !visible.firstChange) {
      this.panel.isOpen$.next(visible.currentValue)
    }
  }

  ngAfterContentInit() {
  }
  ngAfterViewInit() {


  }

}
